<template>
  <div class="app-container">
    <div class="app-wrap">
      <div class="list-box">
        <van-row v-for="(item,index) of list" :key="item.btnText+index" gutter="10">
          <van-col span="6">
            <div class="list-box-wrap flex">
              <van-circle :value="cacularVal(0,item)" :text="cacularVal(1,item)" size="70" layer-color="#eeeeee" color="#2789ee" />
            </div>
          </van-col>
          <van-col span="11">
            <div class="list-box-wrap">
              <div class="txt txt1">
                <span>{{ item.text }}</span>
                <van-icon name="question-o" />
              </div>
              <div class="txt txt2">{{ item.desc }}</div>
            </div>
          </van-col>
          <van-col span="7">
            <div class="list-box-wrap flex">
              <van-button :disabled="item.btnStatus" type="info" size="small">{{ item.btnText }}</van-button>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>

</template>

<script>
import { testData } from '@/api/test.js'

export default {
  data () {
    return {
      value: 8,
      text: '1/12',
      list: [
        { value: 2, total: 2, btnStatus: false, btnText: '', btnText1: '签到', text: '每日签到', desc: '连续签到每7天积分翻倍！' },
        { value: 1, total: 12, btnStatus: false, btnText: '', btnText1: '完善', text: '完善信息项', desc: '授权成功后，奖励50积分' },
        { value: 1, total: 12, btnStatus: false, btnText: '', btnText1: '完善', text: '完善信息项', desc: '授权成功后，奖励50积分' },
        { value: 1, total: 12, btnStatus: false, btnText: '', btnText1: '完善', text: '完善信息项', desc: '授权成功后，奖励50积分' },
        { value: 1, total: 12, btnStatus: false, btnText: '', btnText1: '完善', text: '完善信息项', desc: '授权成功后，奖励50积分' },
        { value: 1, total: 12, btnStatus: false, btnText: '', btnText1: '完善', text: '完善信息项', desc: '授权成功后，奖励50积分' },
        { value: 1, total: 2, btnStatus: false, btnText: '', btnText1: '完成', text: '分享/邀请', desc: '每天500积分垂手可得！' }
      ]
    }
  },
  created () {
    console.log('testData', testData)
  },
  methods: {
    cacularVal (num, item) {
      let str = ''
      if (num === 0) { // 比率
        str = item.value / item.total * 100
        item.btnStatus = str === 100
        if (str === 100) {
          item.btnText = '已' + item.btnText1
        } else {
          item.btnText = '去' + item.btnText1
        }
      } else { // 显示的值
        str = item.value + '/' + item.total
      }
      return str
    }
  }
}
</script>
<style lang="scss" scoped>
$lineColor2: #07b0ab;
$lineColor3: #fe9d48;
$lineColor4: #e4403f;
$lineColor5: #6188ff;
.app-container {
  // height: 100%;
  padding-bottom: 60px;
  // background-image: linear-gradient(120deg, #{$lineColor2} 0%, #50e6bd 100%);
  // background-image: linear-gradient(to right, #{$lineColor3} 0%, #ffc95c 100%);
  // background-image: linear-gradient(to right, #{$lineColor4} 0%, #fb9296 100%);
  background-image: linear-gradient(to top, #{$lineColor5} 0%, #e59bfc 100%);
}
.app-wrap {
  margin: 0 auto;
  width: 96%;
}
.list-box {
  padding: 10px 0;
  /deep/ .van-row {
    margin-bottom: 10px;
    border-radius: 4px;
    background: #fff;
  }
  .list-box-wrap {
    padding: 10px 0;
    height: 80px;
    .txt1 {
      padding-top: 20px;
      line-height: 20px;
      font-weight: bold;
    }
    .txt2 {
      font-size: 12px;
      color: #b7b7b7;
    }
    /deep/ .van-button {
      width: 100px;
    }
  }
}
</style>
